<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" charset="utf-8"></script>
</head>
<body>
<div class="container" id="login-box">


    <div class="form-container sign-up-container">
        <form>
            <h1>注册</h1>           
            <div class="txtb">
                <input type="text">
                <span data-placeholder="Useranme" ></span>
            </div>
            <div class="txtb">
                <input type="email">
                <span data-placeholder="Email" ></span>
            </div> 
            <div class="txtb">
                <input type="password">
                <span data-placeholder="Password" ></span>
            </div>
            <div class="txtb">
                <input type="password">
                <span data-placeholder="Confirm Password" ></span>
            </div> 
            <input type="button" value="注册">           
            <!-- <button>注册</button> -->
        </form>
    </div>
    <div class="form-container sign-in-container">
        <form action="#">
            <h1>登录</h1>
            <div class="txtb">
                <input type="email">
                <span data-placeholder="Email" ></span>
            </div>
            <div class="txtb">
                <input type="password" >
                <span data-placeholder="Password"></span>
            </div>
            <a href="#">忘记密码？</a>
            <!-- <button>登录</button> -->
            <input type="button" value="登录">
        </form>
    </div>

    <div class="overlay-container">
            <div class="overlay">
                <div class="overlay-panel overlay-left">
                    <h1>已有账号？</h1>
                    <p>请使用您的账号进行登录</p>
                    <input class="ghost" type="button" id="signIn"  value="登录">
                    <!-- <button class="ghost" id="signIn" >登录</button> -->
                </div>
                <div class="overlay-panel overlay-right">
                    <h1>没有账号?</h1>
                    <p>立即注册加入我们，和我们一起开始旅程吧</p>
                    <input class="ghost" type="button" id="signUp"  value="注册">
                    <!-- <button class="ghost" id="signUp">注册</button> -->
                </div>
            </div>
        
    </div>
</div>
</body>
<script>
    $("#signUp").click(function(){
        $("#login-box").addClass('right-panel-active')
    })

    $("#signIn").click(function(){
        $("#login-box").removeClass('right-panel-active')
    })

    $(".txtb input").on("focus",function(){
        $(this).addClass("focus")
    })

    $(".txtb input").on("blur",function(){
        if($(this).val() == '')
        $(this).removeClass("focus")
    })

</script>
</html>